<template>
	<view v-if="resData.avatar" class="vip">
		<view class="content">
			<view class="info">
				<image class="info-left" :src=resData.avatar mode=""></image>
				<view class="info-right ">
					<view class="name exceedingEllipsis">
						{{resData.nickname}}
					</view>
					<text v-if="resData.invite_vip_end" class="time">
						会员有效期：{{resData.invite_vip_end}}
					</text>
				</view>
			</view>
			<view class="vipNews ">
				<view class="vipNews-left">
					<text class="title">
						招标会员
					</text>
					<text class="icon"></text>
					<text class="tips">会员权益说明</text>
				</view>
				<view class="vipNews-right">
					<view class="price">
						￥<text class="num">199</text>/年
					</view>
					<view @click="onRenew" class="renew">
						{{resData.invite_vip==1?'续费':'立即开通'}}
					</view>
				</view>
			</view>
		</view>
		<view :style="{'height':  'calc('+ screenHeight  +'px' +' ' + '-' +' ' +'286rpx)'}"
			style="margin-top:60rpx;padding:0 24rpx;box-sizing: border-box;">
			<!-- <u-parse style="height: 100%;" :html="invite_content"></u-parse> -->
			<rich-text :nodes="invite_content"></rich-text>
		</view>
		<payPop ref="payPop" @payBack="payBack"></payPop>
	</view>

</template>

<script>
	import api from '@/api/index.js';
	import payPop from '../payPop.vue';
	export default {
		components: {
			payPop
		},
		data() {
			return {
				screenHeight: '',
				show: false,
				safeAreaBottom: uni.getStorageSync('safeAreaBottom'),
				formData: {
					total_money: 199,
					actual_money: 199,
					payment: 'wxpay',
					type: 1,
					terminal: uni.getSystemInfoSync().platform
				},
				resData: {},
				isVip: false,
				invite_content: '',
			}
		},
		onLoad() {
			const result = uni.getSystemInfoSync();
			let safeAreaBottom = uni.getSystemInfoSync().screenHeight - uni.getSystemInfoSync().safeArea.height;
			this.screenHeight = uni.getStorageSync('screenHeight') - safeAreaBottom;
			this.getData();
		},
		methods: {
			onRenew() {
				this.$refs.payPop.open({
					type: 3,
					total_money: 199,
					actual_money: 199
				});
			},
			payBack(e) {
				console.log('支付完成')
				this.formData = {
					...this.formData,
					...e
				};
				this.getData();

			},
			getData() {
				api.base.getInviteInfo().then(res => {
					console.log('会员信息', res)
					this.resData = res.data;
					this.invite_content = res.data.invite_content;
				})
			},
			// createPay (){
			// 	  // console.log(this.formData)
			// 	  // return;
			// 	api.base.commonPay(this.formData).then(res => {
			// 		console.log(res.data.number)
			// 		this.pay(res.data.number);
			// 	})
			// },
			// pay(number){
			// 	api.base.commonPayCall({number}).then(res => {
			// 		uni.showToast({
			// 			icon:'none',
			// 			title:'支付成功',
			// 			duration:2000
			// 		});

			// 	})

			// }
		}
	}
</script>



<style lang="scss" scoped>
	::v-deep .uni-select {
		border: none !important;
		border-bottom: none !important;
	}

	.vip {
		background: #f5f5f5;

		.content {
			position: relative;
			width: 750rpx;
			height: 346rpx;
			background: #000000;
			padding: 40rpx;
			box-sizing: border-box;

			.info {
				display: flex;
				align-items: flex-start;

				&-left {
					width: 108rpx;
					height: 108rpx;
					border-radius: 50%;
				}

				&-right {
					width: 538rpx;
					display: flex;
					flex-direction: column;
					margin-left: 24rpx;

					.name {
						height: 42rpx;
						margin-top: 14rpx;
						font-size: 30rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #FFFFFF;
						line-height: 35rpx;
					}

					.time {
						margin-top: 8rpx;
						height: 30rpx;
						font-size: 22rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #999999;
						line-height: 26rpx;
					}

				}
			}

			.vipNews {
				position: absolute;
				z-index: 99;
				top: 180rpx;
				width: 670rpx;
				height: 214rpx;
				padding: 0 36rpx;
				box-sizing: border-box;
				background: linear-gradient(90deg, #F6E4D0 0%, #DEBC99 100%);
				box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(219, 171, 137, 0.16);
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				border-image: linear-gradient(138deg, rgba(244, 223, 198, 1), rgba(244, 223, 198, 0.6), rgba(244, 223, 198, 1)) 1 1;
				display: flex;
				justify-content: space-between;

				&-left {
					display: flex;
					flex-direction: column;
					margin-top: 48rpx;

					.title {
						height: 56rpx;
						font-size: 40rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #333333;
						line-height: 47rpx;
					}

					.icon {
						width: 78rpx;
						height: 6rpx;
						background: linear-gradient(90deg, #C8906A 0%, rgba(236, 205, 181, 0) 100%);
					}

					.tips {
						height: 40rpx;
						margin-top: 16rpx;
						font-size: 28rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #666666;
						line-height: 33rpx;
					}
				}

				&-right {
					.price {
						margin-top: 40rpx;
						display: flex;
						align-items: flex-end;
						height: 56rpx;
						font-size: 24rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #333333;

						.num {
							font-size: 40rpx;
							font-family: PingFang SC-Bold, PingFang SC;
							font-weight: bold;
							color: #333333;
						}
					}

					.renew {
						width: 176rpx;
						height: 64rpx;
						margin-top: 10rpx;
						background: #333333;
						box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(51, 51, 51, 0.16);
						border-radius: 60rpx 60rpx 60rpx 60rpx;
						font-size: 28rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #EDD5BC;
						line-height: 64rpx;
						text-align: center;
					}
				}
			}
		}

		.bg {
			width: 100%;
		}

		.popCont {
			width: 750rpx;
			background: #FFFFFF;
			padding: 48rpx 48rpx 10rpx 48rpx;
			box-sizing: border-box;

			.title {
				height: 52rpx;
				font-size: 34rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #333333;
				line-height: 51rpx;
			}

			.payNews {
				flex-direction: column;
				margin: 24rpx auto;
				width: 654rpx;
				height: 216rpx;
				background: rgba(255, 37, 68, 0.06);

				.word {
					font-size: 28rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #333333;
					line-height: 42rpx;
				}

				.money {
					height: 78rpx;
					font-size: 36rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #FF2544;
				}

				text {
					font-size: 56rpx;
					font-family: PingFang SC-Heavy, PingFang SC;
					font-weight: 800;
					color: #FF2544;
				}
			}

			.payType {
				width: 654rpx;
				height: 56rpx;
				padding-top: 24rpx;
				border-top: 2rpx solid rgba(0, 0, 0, 0.03);

				&-left {
					font-size: 28rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #333333;
				}

				&-right {
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #999999;

					image {
						width: 32rpx;
						height: 32rpx;
					}
				}
			}

			.popBtn {
				width: 686rpx;
				height: 88rpx;
				margin-top: 160rpx;
				background: #6D0CF7;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
			}
		}
	}
</style>